import React, { useState } from 'react';
import { Input } from 'antd';

const NumericInput = (props: Record<string, any>) => {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value: inputValue } = e.target;
    const reg = /^-?\d*(\.\d*)?$/;
    if (reg.test(inputValue) || inputValue === '' || inputValue === '-') {
      onChange(inputValue);
    }
  };

  // '.' at the end or only '-' in the input box.
  const handleBlur = () => {
    let valueTemp = value;
    if (value.charAt(value.length - 1) === '.' || value === '-') {
      valueTemp = value.slice(0, -1);
    }
    onChange(valueTemp.replace(/0*(\d+)/, '$1'));
  };

  const onChange = (value: string) => {
    setValue(value);
  };
  return (

    <Input

      {...props}
      onChange={handleChange}
      onBlur={handleBlur}
      maxLength={16}
    />
  );
};

// const App: React.FC = (props) => {
 

//   return <NumericInput value={value} onChange={setValue} {...props} />;
// };

export default NumericInput;